<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Scrollbar</title>

    <script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../reset.css"/>
    <style type="text/css">

        .scrollbar{overflow: hidden; position: relative;}
        .scrollcoter{ position: absolute;top:0; right: 1px;}
        .scrolltip{ position: absolute; top:0;right: -1px;_right: -2px; }
        .scrollcont{position: relative;}
        .scrollstyle{width: 495px;height: 100px;padding-right: 5px; }
        .scrollstyle .scrollcont{}
        .scrollstyle .scrollcoter{width: 1px;height: 100%;background: #ccc;}
        .scrollstyle .scrolltip{width: 3px;background: #666; height: 20px; }
     </style>
</head>
<body>  
<div class="scrollbar scrollstyle">
    <p class="scrollcont">
        2011年5月26日27日，成都天来地产招商营销团队在邓岗总经理带领下参加了由中港联行于上海复旦皇冠假日酒店主办的第十一届中国商业地产招商大会暨品牌商家选址大会。到场开发商、商家以及行业服务商总计超过五百人
        大会的议程分成两天，首日的峰会和次日的大会。本次峰会出席人数达到百人，到场的商家业态代表有：大润发、香港新世界百货集团、法国雅高国际酒店集团、国美电器、百胜餐饮集团、唐宫（中国）控股公司、第六空间、世纪星滑冰场、马克华菲、顶好坊DAMBOLO (丹比)等知名品牌十来家，也有来自于全国各省区的二十个商业地产开发商，招商运营经理刘洪全代表天来地产对天来国际广场进行了详细介绍，峰会同时就山西九昌项目和湘潭可可置业项目进行案例论证，提供了非常深入的建议，以及充分的互动交流，气氛非常踊跃积极有效促进开发商与商家的深入沟通。此次峰会使天来国际广场有针对性的在品牌商家中得到大力推荐起到积极作用
   次日是一400多人的招商大会，中国商业地产》杂志总编洪奇辉发表了六个核心观点的演讲，大会期间天来国际广场通过布展形式很好的展示了公司及项目形象，吸引了大批与会商家关注，并建立初步沟通意向，为项目招商工作积累大量商家资源，为后期商业规划布局及招商运营具有十分重要的作用

    </p>

    <div class="scrollcoter">
        <div class="scrolltip"></div>
    </div>
</div>
<script type="text/javascript">
    (function($){

    	$.fn.Scrollbar=function(options){
    		var opt=$.extend(true,{},$.fn.Scrollbar.settings,options);
    		return this.each(function(){
    			var	$this=$(this);
    			var	scrollbar=new Scrollbar(opt,$this);
    				scrollbar.init();

    		});
    	};
    	var Scrollbar=function(options,obj){
    		this.o = options;
            this.scrolling=this.o.scrolling;
    		this.$scrollbar = obj;
            this.$scrollcont=this.$scrollbar.find('.scrollcont');
            this.$scrollcoter=this.$scrollbar.find('.scrollcoter');
            this.$scrolltip=this.$scrollbar.find('.scrolltip');
            this.scrollHeight=-(this.$scrollcont.outerHeight(true)-this.$scrollbar.height());
            this.coterHeight=this.$scrollcoter.height()-this.$scrolltip.height();
            this.tipTop=0;
            this.moveTop=0;
            this.moveDis=23;
    	};
    	Scrollbar.prototype={
    		init:function(obj){
    	 	    var _this=this;
                this.$scrollcont.css({top:0});
                this.$scrollbar.bind('mousewheel DOMMouseScroll',function(e){
                    var direct=0;
                    if(e.wheelDelta) direct=e.wheelDelta>0?1:-1;
                    if(e.detail) direct=e.detail<0?1:-1;

                        _this.move(direct);
                    return false;
                })
    		},
            move:function(direct){
                var  distance=this.moveDis;
                //计算每次移动的距离，根据是否在最后一次
                if(this.moveTop-this.scrollHeight<this.moveDis) distance=this.moveTop-this.scrollHeight;
                if(-this.moveTop<this.moveDis) distance=-this.moveTop;
                if(distance==0) distance=this.moveDis;
                
                var tipDis=this.coterHeight*distance/this.scrollHeight;

                if(direct>0){
                    //向上滚动
                    if(this.moveTop>=0) return;
                    this.$scrolltip.css({top:this.tipTop+=tipDis});
                    this.$scrollcont.css({top:this.moveTop+=distance});
                }else{
                    //向下滚动
                    if(this.moveTop <=  this.scrollHeight) return;
                    this.$scrolltip.css({top:this.tipTop-=tipDis});
                    this.$scrollcont.css({top:this.moveTop-=distance});
                }
                this.scrolling(this.moveTop);

            }



    	};

    	$.fn.Scrollbar.settings={
            scrolling:function(top){}
    	}
    })(jQuery);
    $('.scrollbar').Scrollbar( );
</script>

</body>
</html>